<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-04 09:46:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-04 10:55:31
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 100px;
            width: 520px;
            background-color: #abcdef;
            border-radius: 10px;
            padding: 50px;
            box-shadow: 0 2px 12px #666666;
        }

        #box {
            background-color: #ff5511;
            margin: 50px;
            padding: 20px;
            font-size: 50px;
            font-weight: bold;
            border-radius: 15px;
            box-shadow: 0 2px 12px #666666;
        }


        #bt {
            width: 100px;
            font-size: 20px;
            font-weight: bold;
            background-color: aquamarine;
            border-radius: 8px;
            box-shadow: 0 2px 12px #666666;
            cursor: pointer;
            padding: 5;
        }
    </style>
</head>

<body>
    <center>
        <div id="main">
            <div id="box">济南前端2202</div>
            <button id="bt" onclick="doit()">开始</button>
        </div>
    </center>
    <script>
        // 随机数 
        // 数组 

        // dom  
        // 点击事件 

        // 定时器 

        // 准备名单 
        var nameList = ["李旭", '劉曉慧', '袁晨龙', '钱坤', '刘世达', '胡英豪', '张子涵', "张国亮", "张乃涛", "魏涛", "侯召鑫", "石新迪",
            "肖帅", "马瑞", "吕鑫雨", "李欢", "刘世伟", "谭浩然", "邢佳乐", "李明灿", "郑潮", "董灿灿", "韩沛泽", "王鑫晟", "吴相博", "郭硕", "朱媛媛",
            "孙春娟", "张宗泽", "张弯弯", "张雅文",
            "谢玟娴", "於新超", "魏洪荣", "秦佳鑫", "赵传彬", "王震", "孙自冉", "郭兆涛", "王哲", "陈乃涛", "韦辉文", "平昌安",
            "陈舒舒", "吴康", "鲁雯雯", "王学壮", "赵凌宇", "王晓飞", "孟可", "冯文静", "张琳", "张曼", "王传宝", "陈珂"
        ];
        
        function show() {
            // 随机数 作为数组的下标  
            var num = Math.floor(Math.random() * 55);


            // 把上面根据下标num 取出来的元素放到指定的区域
            var box = document.getElementById('box');
            box.innerHTML = nameList[num];
            flag = setTimeout("show()",50);
        }

        // setInterval(show,100); 让名字一直滚动  




        // 需要一个按钮 触发它滚动  

        var btn = document.getElementById('bt');
        // btn.onclick = function(){


        // }

        // 用户点击 动起来 
        // 按钮变化 
        var flag = null; // 默认没有任何定时器在执行

        function doit() {
            if (flag == null) {
                // 动起来
                show();
                // 停止 
                btn.innerHTML = '停止';
                btn.style.backgroundColor = 'red';
            } else {
                // 不动了
                clearTimeout(flag);
                // clearInterval()
                // 开始
                btn.innerHTML = '开始';
                btn.style.backgroundColor = 'aquamarine';
                flag = null;


            }


           

        }
    </script>
</body>

</html>